<script setup>
	import $http from '@/utils/http'
	import { ref, onMounted, onUnmounted, computed, nextTick, watch } from 'vue'
	import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
	import { moveElementsToNewArray, getClientHeight } from '@/utils/pkg'
	
	import watchIcon from '@/static/icon/home/watch.png'
	import liveIcon from '@/static/icon/home/live.png'
	import searchIcon from '@/static/icon/home/search.png'
	import avatorIcon from '@/static/icon/home/avator.png'
	import egIcon from '@/static/icon/home/eg.png'
	import egVideo from '@/static/icon/home/eg.mp4'
	import egBanner0 from '@/static/icon/home/banner0.png'
	import egBanner1 from '@/static/icon/home/banner1.png'

	const fileList = ref([])
	const showFileList = ref([
		{
			bigmain:{
				poster:'https://img0.baidu.com/it/u=2082062769,812569785&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067',
				nickname:'nini',
				avatar:'avatorIcon',
				name: '热门影视',
				filename:'https://yulezhishangchaowan.oss-cn-nanjing.aliyuncs.com/uploads/20250522/5a25525dff9261c156b4a86756cfd7be.mp4'
			},
			list:[
			{
				poster:'https://img0.baidu.com/it/u=2082062769,812569785&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067',
				nickname:'nini',
				avatar:'avatorIcon',
				name: '热门影视',
				filename:'https://yulezhishangchaowan.oss-cn-nanjing.aliyuncs.com/uploads/20250522/5a25525dff9261c156b4a86756cfd7be.mp4'
			},
			{
				poster:'https://img0.baidu.com/it/u=2082062769,812569785&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067',
				nickname:'nini',
				avatar:'avatorIcon',
				name: '热门影视',
				filename: 'https://yulezhishangchaowan.oss-cn-nanjing.aliyuncs.com/uploads/20250522/5a25525dff9261c156b4a86756cfd7be.mp4'
			}
			]
		},
		{
			bigmain:{
				poster:'https://img0.baidu.com/it/u=2082062769,812569785&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067',
				nickname:'nini',
				avatar:'avatorIcon',
				name: '热门影视',
				filename:'https://yulezhishangchaowan.oss-cn-nanjing.aliyuncs.com/uploads/20250522/5a25525dff9261c156b4a86756cfd7be.mp4'
			},
			list:[
			{
				poster:'https://img0.baidu.com/it/u=2082062769,812569785&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067',
				nickname:'nini',
				avatar:'avatorIcon',
				name: '热门影视',
				filename:'https://yulezhishangchaowan.oss-cn-nanjing.aliyuncs.com/uploads/20250522/5a25525dff9261c156b4a86756cfd7be.mp4'
			},
			{
				poster:'https://img0.baidu.com/it/u=2082062769,812569785&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067',
				nickname:'nini',
				avatar:'avatorIcon',
				name: '热门影视',
				filename: 'https://yulezhishangchaowan.oss-cn-nanjing.aliyuncs.com/uploads/20250522/5a25525dff9261c156b4a86756cfd7be.mp4'
			}
			]
		}
	])
	const cacheFileList = ref([])
	const videoPage = ref(1)
	const videoLimit = ref(20)
	const platform = ref(0)
	const menuList = ref([
		{ text: '关注', key: true },
		{ text: '推荐', key: false },
		{ text: '发现', key: false },
		{ text: '热门', key: false },
	])
	const noticeList = ref([
		{ text: '恭喜 用户26***04 赢得4354.00-PG电子-', link: 'https://xxx.com', linkText: '招财喵' },
		{ text: '恭喜 用户99***94 赢得816.00-ZG游戏-', link: 'https://yyy.com', linkText: 'Ken' },
	]);
	const currentIndex = ref(0);
	const itemHeight = 72; // 单条公告高度，单位rpx，与样式保持一致
	let timer = null;
	const noticeScrollLeft = ref(0)
	const noticeScrollView = ref(null)
	const noticeItems = ref(null)
	let noticeTimer = null
	let scrollSpeed = 1 // 每次滚动的像素数，越大越快
	let scrollInterval = 16 // 定时器间隔(ms)，越小越丝滑

	const translateY = computed(() => {
		return `-${currentIndex.value * itemHeight}rpx`;
	});

	const startScroll = () => {
		if (noticeList.value.length <= 1) return;
		timer = setInterval(() => {
			currentIndex.value = (currentIndex.value + 1) % noticeList.value.length;
		}, 3000);
	};

	const stopScroll = () => {
		if (timer) {
			clearInterval(timer);
			timer = null;
		}
	};

	function getHalfWidth() {
		const itemsEl = noticeItems.value
		if (itemsEl && itemsEl.children && itemsEl.children.length) {
			let width = 0
			for (let i = 0; i < itemsEl.children.length / 2; i++) {
				width += itemsEl.children[i].offsetWidth
			}
			return width
		}
		return 0
	}

	const startNoticeScroll = () => {
		stopNoticeScroll()
		noticeTimer = setInterval(() => {
			const halfWidth = getHalfWidth()
			if (halfWidth > 0) {
				noticeScrollLeft.value += scrollSpeed
				if (noticeScrollLeft.value >= noticeItems.value.scrollWidth / 2) {
					noticeScrollLeft.value = 0
				}
			}
		}, scrollInterval)
	}
	const stopNoticeScroll = () => {
		if (noticeTimer) {
			clearInterval(noticeTimer)
			noticeTimer = null
		}
	}

	// 监听noticeList变化，数据渲染后再启动滚动
	watch(
		() => noticeList.value,
		() => {
			nextTick(() => {
				setTimeout(() => {
					startNoticeScroll()
				}, 300)
			})
		},
		{ immediate: true, deep: true }
	)

	// 获取视频
	const getFiles = async () => {
		const res = await $http.request({
			url: `/get-video-file/${videoPage.value}/${videoLimit.value}`,
			method: 'GET',
		})
		if(res.code !== 200) {
			uni.showToast({
				title: res.msg,
				duration: 2000,
				icon: 'error',
			});
			return
		}
		fileList.value = res.data
		showFileList.value = moveElementsToNewArray(fileList.value, 15)
	}
	
	// 顶部菜单
	const clickMenu = (itme, index) => {
		console.log(itme, index)
		menuList.value.filter(v => v.key = false)
		menuList.value[index].key = true
		uni.showLoading();
		setTimeout(() => {
			uni.hideLoading();
		}, 1000)
	}
	
	// 点击用户头像
	const clickUser = (itme, index) => {
		console.log(itme, index)
	}
	
	// 跳转播放页面
	const filePlay = (itme, i) => {
		uni.navigateTo({
			url: `/pages/show-video/show-video?file=${itme.filename}&name=${itme.name}`
		});
	}
	
	// 滑动到底部
	onReachBottom(()=>{
		let arr = []
		if(fileList.value.length > 15) {
			arr =	moveElementsToNewArray(fileList.value, 15)
		} else {
			arr =	moveElementsToNewArray(fileList.value, fileList.value.length)
		}
		showFileList.value.push(...arr)
	})

	// 下拉触发
	onPullDownRefresh(() => {
		uni.reLaunch({
		    url: '/pages/index/index'
		})
		uni.stopPullDownRefresh()
	})

	// 公告链接点击事件
	function onNoticeLinkClick(link) {
		// 这里可以用uni.navigateTo或uni.setClipboardData等
		window.open(link, '_blank')
	}

	onMounted(() => {
		// getFiles()
		platform.value = getClientHeight()
		startScroll();
	})
	onUnmounted(() => {
		stopScroll();
		stopNoticeScroll()
	})
</script>

<template>
	<view class="page-home" :style="`padding-top:${platform}rpx;`">
		<view class="custom-header" :style="`padding-top:${platform}rpx;`">
			<image class="header-left-icon" src="@/static/icon/home/clock.png" mode="aspectFill" />
			<view class="header-search-box">
				<input class="header-search-input" placeholder="搜索" disabled />
			</view>
			<view class="header-icons">
				<image class="header-icon" src="@/static/icon/home/clock.png" mode="aspectFill" />
				<image class="header-icon" src="@/static/icon/home/grid.png" mode="aspectFill" />
				<image class="header-icon" src="@/static/icon/home/camera.png" mode="aspectFit" />
			</view>
		</view>
		<view class="menu-top-box">
			<!-- <image class="live-icon" mode="aspectFill" :src="liveIcon"></image> -->
			<view class="menu-box">
				<text :class="`menu-list ${itme.key ? 'menu-list-bottom' : ''}`" v-for="(itme, index) in menuList"
					:key="itme.id" @tap="clickMenu(itme, index)">
					{{ itme.text }}
				</text>
			</view>
			<!-- <image class="search-icon" mode="aspectFill" :src="searchIcon"></image> -->
		</view>
		<view class="notice-bar">
			<image class="notice-icon-img" src="@/static/icon/home/clock.png" mode="aspectFill" />
			<scroll-view
				class="notice-scroll-x"
				scroll-x="true"
				:scroll-left="noticeScrollLeft"
				show-scrollbar="false"
				ref="noticeScrollView"
			>
				<view class="notice-items-x" ref="noticeItems">
					<view class="notice-item-x" v-for="(notice, index) in noticeList" :key="'a'+index">
						<text class="notice-text">{{ notice.text }}</text>
						<text v-if="notice.link" class="notice-link" @click="onNoticeLinkClick(notice.link)">{{ notice.linkText }}</text>
					</view>
					<view class="notice-item-x" v-for="(notice, index) in noticeList" :key="'b'+index">
						<text class="notice-text">{{ notice.text }}</text>
						<text v-if="notice.link" class="notice-link" @click="onNoticeLinkClick(notice.link)">{{ notice.linkText }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<image class="show-banner" mode="aspectFill" :src="egBanner1"></image>
		<view class="content-box">
			<view class="content-header">
				<text class="content-title">栏目标题</text>
				<text class="content-more">查看更多></text>
			</view>
			<view  v-for="(itme, index) in showFileList" :key="index">
				<view class="main-video">
					<view class="video-image-box">
						<image class="video-image" :src="egBanner0" mode="aspectFill"></image>
						<image class="play-btn" src="@/static/icon/home/play.png" mode="aspectFill" />
					</view>
					<view class="video-name">视频名称</view>
				</view>
				<view class="show-file-box">
					<view class="show-file-list" v-for="(itmes, indexs) in itme.list" :key="index" @click="filePlay(itmes, indexs)">
						<view class="show-img-out">
							<image class="show-video" mode="aspectFill" :src="egIcon"></image>
							<image class="play-btn" src="@/static/icon/home/play.png" mode="aspectFill" />
						</view>

						<view class="show-data">
							视频名称
						</view>
					</view>
				</view>
			</view>

		</view>




	</view>
</template>

<style scoped lang="scss">
@import "@/common/common.scss";

.page-home {
	width: 100%;
	.notice-bar {
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 0 10rpx;
		margin: 160rpx 0 0;
		border-radius: 0;
		overflow: hidden;
		height: 48rpx;
		.notice-icon-img {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
			flex-shrink: 0;
		}
		.notice-scroll-x {
			flex: 1;
			height: 100%;
			overflow: hidden;
		}
		.notice-items-x {
			display: inline-block;
			white-space: nowrap;
			min-width: 100%;
		}
		.notice-item-x {
			display: inline-block;
			font-size: 24rpx;
			color: #222;
			margin-right: 48rpx;
			line-height: 48rpx;
			white-space: nowrap;
		}
		.notice-text {
			color: #222;
		}
		.notice-link {
			color: #1976d2;
			margin-left: 4rpx;
			text-decoration: underline;
			cursor: pointer;
		}
	}
	.show-banner {
		width: 100%;
		height: 300rpx;
	}
	
	.menu-top-box {
		.live-icon {
			width: 48rpx;
			height: 42rpx;
		}
	
		.search-icon {
			width: 44rpx;
			height: 48rpx;
		}
		display: flex;
		align-items: center;
		width: 100%;
		padding-left: 40rpx;
		padding-right: 40rpx;
		box-sizing: border-box;
		height: 90rpx;
		// border-bottom: 1px solid #252932;
		background-color: $all-bg-color;
		top: 100rpx;
		z-index: 100;
		position: fixed;
		
		.menu-box {
			flex:1;
			width: 100%;
			// height: 100rpx;
			
			display: flex;
			align-items: center;
			justify-content: space-around;
			
			.menu-list {
				color: #999;
				font-size: 32rpx;
			}
			.menu-list-bottom {
				position: relative;
				color: #333 !important;
				font-weight: bold;
				// text-decoration-line: underline;
				// text-decoration-color: #A864C7;
				// text-decoration-style: solid;
				// text-decoration-thickness: 6rpx;
				// text-underline-offset: 10rpx;
				&::after {
					content: '';
					position: absolute;
					bottom: -14rpx;
					left: 50%;
					transform: translate(-50%,0);
					width: 80%;
					height: 8rpx;
					background-color: #A864C7;
					border-radius: 20rpx;
					
				}
			}
		}
	}
	.content-box {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin: 0 auto;
		.content-header {
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			align-items:center;
		}
		
			.content-title {
				font-size: 32rpx;
				color: #000;
				font-weight: bold;
			}
			.content-more {
				font-size: 24rpx;
				color: #999;
			}
		
			.main-video {
				margin-top:0;
				.video-image-box{
					position: relative;
				}
			}
		
			.video-image {
				width: 100%;
				height: 300rpx;
				background-color: #f0f0f0;
			}
		
			.video-name {
				width:100%;
				text-align: center;
				font-size: 28rpx;
				margin-top: 10rpx;
			}
		
			.sub-videos {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
			}
		
			.sub-video {
				width: 360rpx;
			}
	}
	
		
	.show-file-box {
		margin-top: 20rpx;

		display: grid;
		grid-gap: 20rpx;
		align-items: start;
		// grid-auto-rows: 480rpx;
		justify-content: center;
		grid-template-columns: repeat(auto-fill, calc(50% - 20rpx));
		
		.show-file-list {
			position: relative;
			width: 100%;
			height: 320rpx;
			padding: 0;
			border-radius: 10rpx;
			box-sizing: border-box;
			background-color: #fff;
			overflow: hidden;
			// border:1px solid red;
			
			.show-video {
				width: 100%;
				// height: 350rpx;
				border-radius: 10rpx;
			}
			.show-img-out {
				position: relative;
				height: 240rpx;
				overflow: hidden;
			}
			.show-data {
				font-size: 28rpx;
				width: 100%;
				text-align: center;
				margin-top: 25rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				padding: 0 20rpx;  // 添加内边距防止文字贴边
				box-sizing: border-box;
			}
		}
	}
	.play-btn {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
	}
	.custom-header {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		box-sizing: border-box;
		background: transparent;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background: #fff;

		.header-left-icon {
			width: 56rpx;
			height: 56rpx;
			margin-right: 20rpx;
		}
		.header-search-box {
			flex: 1;
			height: 56rpx;
			background: rgba(0,0,0,0.15);
			border-radius: 28rpx;
			display: flex;
			align-items: center;
			padding: 0 24rpx;
			margin-right: 20rpx;
			.header-search-input {
				width: 100%;
				border: none;
				background: transparent;
				color: #fff;
				font-size: 28rpx;
			}
		}
		.header-icons {
			display: flex;
			align-items: center;
			.header-icon {
				width: 44rpx;
				height: 44rpx;
				margin-left: 24rpx;
			}
		}
	}
}
</style>